@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;

@include b(line-chart-card) {
  position: relative;
  overflow: hidden;
  background-color: cssVar(bg-color);
  border-radius: cssVar(radius);

  @include e(header) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;

    @include m(metric) {
      .value {
        font-size: 1.7rem;
        font-weight: 500;
        line-height: 1;
        color: cssVar(text-gray-900);
      }

      .label {
        margin: 4px 0 0;
        font-size: 14px;
        color: cssVar(text-gray-600);
      }
    }

    @include m(percentage) {
      font-size: 14px;
      font-weight: 500;
      color: cssVarEl(color-danger);

      &.is-increase {
        color: cssVarEl(color-success);
      }

      @include is(mini-chart) {
        position: absolute;
        bottom: 20px;
      }
    }

    @include m(date) {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-size: 12px;
      color: cssVar(text-gray-600);
    }
  }

  @include e(content) {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 90px;

    @include is(mini-chart) {
      position: absolute;
      top: 25px;
      right: 40px;
      left: auto;
      width: 40%;
      height: 60px !important;
    }
  }
}
